/**
 * 修改密码页面组件
 * 
 * 功能说明：
 * - 允许用户修改登录密码
 * - 验证原密码的正确性
 * - 确保新密码的安全性
 * - 提供密码确认机制
 * 
 * 安全特性：
 * - 原密码验证，确保用户身份
 * - 新密码强度检查
 * - 密码确认一致性验证
 * - 表单验证和错误处理
 * 
 * 使用场景：
 * - 用户忘记密码后的密码重置
 * - 定期密码更新
 * - 安全策略要求的密码修改
 * - 账户安全维护
 */

import React, { useState } from 'react'
import { Card, Form, Input, Button, message } from 'antd'
import { useAuthStore } from '@stores/auth'
import { useNavigate } from 'react-router-dom'
import AuthService from '../services/auth'

function SettingsPasswordPage() {
  // 从认证状态管理中获取用户登录状态
  const { isAuthenticated } = useAuthStore()
  // 获取导航函数，用于页面跳转
  const navigate = useNavigate()
  // 加载状态，用于控制按钮的禁用状态和显示加载动画
  const [loading, setLoading] = useState(false)

  /**
   * 处理表单提交的函数
   * 
   * @param {Object} values - 表单提交的值
   * @param {string} values.oldPassword - 原密码
   * @param {string} values.newPassword - 新密码
   * @param {string} values.confirmPassword - 确认新密码
   */
  const onFinish = async (values) => {
    // 设置加载状态为true，显示加载动画
    setLoading(true)
    
    try {
      // 调用后端API修改密码
      const response = await AuthService.changePassword({
        oldPassword: values.oldPassword,
        newPassword: values.newPassword
      })
      
      // 检查API响应是否成功
      if (response.success) {
        // 显示成功消息
        message.success('密码修改成功！')
        // 跳转到设置页面
        navigate('/settings')
      } else {
        // 显示API返回的错误消息
        message.error(response.message || '密码修改失败')
      }
    } catch (error) {
      // 处理API调用错误
      console.error('密码修改失败:', error)
      message.error(error.message || '密码修改失败，请稍后重试')
    } finally {
      // 无论成功或失败，都将加载状态设置为false
      setLoading(false)
    }
  }

  return (
    <div style={{ 
      marginTop: 64,
      marginLeft: isAuthenticated ? 200 : 0,
      minHeight: 'calc(100vh - 64px)',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      padding: 24
    }}>
      <Card title="修改密码" style={{ width: 400 }}>
        <Form layout="vertical" onFinish={onFinish} style={{ maxWidth: 350, margin: '0 auto' }}>
          {/* 原密码输入框 */}
          <Form.Item 
            label="原密码" 
            name="oldPassword" 
            rules={[{ required: true, message: '请输入原密码' }]}
          > 
            <Input.Password placeholder="请输入当前密码" />
          </Form.Item>
          
          {/* 新密码输入框 */}
          <Form.Item 
            label="新密码" 
            name="newPassword" 
            rules={[
              { required: true, message: '请输入新密码' },
              { min: 6, message: '密码长度至少6位' }
            ]}
          > 
            <Input.Password placeholder="请输入新密码" />
          </Form.Item>
          
          {/* 确认新密码输入框 */}
          <Form.Item 
            label="确认新密码" 
            name="confirmPassword" 
            dependencies={["newPassword"]} 
            rules={[
              { required: true, message: '请确认新密码' }, 
              ({ getFieldValue }) => ({
                validator(_, value) {
                  if (!value || getFieldValue('newPassword') === value) {
                    return Promise.resolve()
                  }
                  return Promise.reject('两次输入的密码不一致')
                }
              })
            ]}
          > 
            <Input.Password placeholder="请再次输入新密码" />
          </Form.Item>
          
          {/* 提交按钮 */}
          <Form.Item> 
            <Button 
              type="primary" 
              htmlType="submit" 
              loading={loading} 
              style={{ width: '100%' }}
            >
              修改密码
            </Button>
          </Form.Item>
        </Form>
      </Card>
    </div>
  )
}

export default SettingsPasswordPage 